import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

import css from './Loading.less'

const Loading = ({ spinning, fullScreen, ...rest }) => {
  if (rest.error) {
    console.error(rest.error)
    return <div>Sorry, there was a problem loading the page. </div>;
  } else if (rest.isLoading) {
    return (
        <div className={classNames([css.loading], {
          [css.hidden]: !spinning,
          [css.fullScreen]: fullScreen,
        })}>
          <div className={css.wrapper}>
            <div className={css.inner} />
            <div className={css.text} >LOADING</div>
          </div>
        </div>
    )
  } else {
    return null
  }
}


Loading.propTypes = {
  spinning: PropTypes.bool,
  fullScreen: PropTypes.bool,
}

export default Loading
